<template>
    <div class="login11">
        <el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer"
            style="background-color: #1c3f56" :with-header="false">
            <Drawer :drawer="drawer" @childfn="fn" />
        </el-drawer>
        <div class="wrap w">
            <div class="leftbox">
                <Item :data="data" />
                <Nav />
            </div>
            <div class="rightbox">
                <Header class="headerMoble" :time="datatime" :openDrawer="openDrawer" />
                <div class="content" v-if="data != null">
                    <div class="content-topleft">
                        <p class="content-title">{{ $t(i18n.global.t('dashboard.Milestones')) }}</p>
                        <el-calendar ref="calendar" class="calendar">
                            <template #header="{ date }">
                                <el-button size="small" @click="selectDate('prev-month')"
                                    style="background-color: #224154; border: none">
                                    <img src="@/assets/arrow-left-bold.svg" />
                                </el-button>
                                <!-- <span class="month">{{ date.split(' ').slice(-1).join() }}</span> -->
                                <span class="month">{{ showMounth(date) }}</span>
                                <el-button size="small" @click="selectDate('next-month')"
                                    style="background-color: #224154; border: none">
                                    <img src="@/assets/arrow-right-bold.svg" />
                                </el-button>
                            </template>
                        </el-calendar>
                        <div class="topleft-bottom">
                            <div class="topleft-bottom1">
                                <p class="yuan3"></p>
                                <p class="calendar-title">
                                    {{ $t(i18n.global.t('dashboard.PublicOfferSubscription')) }}
                                </p>
                            </div>

                            <div class="topleft-bottom1">
                                <p class="yuan6"></p>
                                <p class="calendar-title">
                                    {{ $t(i18n.global.t('dashboard.PublicOfferAllotment')) }}
                                </p>
                            </div>
                            <div class="topleft-bottom1">
                                <p class="yuan7"></p>
                                <p class="calendar-title">
                                    {{ $t(i18n.global.t('dashboard.PublicOfferMoneySettlement')) }}
                                </p>
                            </div>
                            <div class="topleft-bottom1">
                                <p class="yuan5"></p>
                                <p class="calendar-title">
                                    {{ $t(i18n.global.t('dashboard.Listingdate')) }}
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="content-topright">
                        <p class="topright-title">
                            {{ $t(i18n.global.t('dashboard.PublicOffer')) }}
                        </p>
                        <!-- <div ref="main" style="width: 100%; height: 100%"></div> -->
                        <v-chart :option="option" autoresize style="width: 100%; height: 100%" />
                        <div class="topright-p">
                            <div class="p-1">
                                <div>
                                    <p>{{ $t(i18n.global.t('dashboard.SubscriptionRatio')) }}</p>
                                    <p class="p-2-2">{{ subscriptionRatio1 }}x</p>
                                </div>
                                <div>
                                    <p class="p-1-1">
                                        {{ $t(i18n.global.t('dashboard.ApplicationQuantity')) }}
                                    </p>
                                    <p class="p-2-2">
                                        {{
                                            ApplicationQuantity?.toString().replace(
                                                /(\d)(?=(?:\d{3})+$)/g,
                                                '$1,'
                                            )
                                        }}
                                    </p>
                                </div>
                            </div>
                            <div class="p-3">
                                <p>{{ $t(i18n.global.t('dashboard.InitialShares')) }}</p>
                                <p>{{ $t(i18n.global.t('dashboard.FinalShares')) }}</p>
                            </div>
                            <div class="p-4">
                                <Box :leftNumber="Number(initialpublic)" :rightNumber="Number(code44)"></Box>
                            </div>
                            <div class="p-5">
                                {{ $t(i18n.global.t('dashboard.LastUpadated')) }}: {{ datatime }}
                            </div>
                        </div>
                    </div>
                    <div class="content-bottomleft">
                        <p class="bottomleft-title">
                            {{ $t(i18n.global.t('dashboard.InitialAllocation')) }}
                        </p>

                        <div ref="main1" style="width: 100%; height: 100%"></div>
                        <div class="bottomleft-bouttom1">
                            <div class="initialallocationleft">
                                <div class="initialallocationlefttitle">
                                    <div class="title">
                                        <p class="yuan1"></p>
                                        <p class="yuan-title">
                                            <span class="desmidle">
                                                {{ $t(i18n.global.t('dashboard.Public')) }}
                                            </span>
                                        </p>
                                    </div>
                                    <div class="title">
                                        <p class="yuan2"></p>
                                        <p class="yuan-title">
                                            <span class="desmidle">
                                                {{ $t(i18n.global.t('dashboard.Institutional')) }}
                                            </span>
                                        </p>
                                    </div>
                                    <div class="public-left2">
                                        <p class="yuan-titlesp">
                                            {{ $t(i18n.global.t('dashboard.TotalOfferShares')) }}
                                        </p>
                                    </div>
                                </div>
                                <div class="initialallocationleftpercent">
                                    <div class="persent">{{ InitialAllocationPublic1 }}</div>
                                    <div class="persent">{{ InitialAllocationInstitutional1 }}</div>
                                </div>
                            </div>
                            <div class="initialallocationright">
                                <p class="yuan-title2">
                                    {{
                                        initialpublic
                                            ?.toString()
                                            .replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
                                    }}
                                </p>
                                <p class="yuan-title2">
                                    {{
                                        initialinstituational
                                            ?.toString()
                                            .replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
                                    }}
                                </p>
                                <p class="yuan-title1">
                                    {{ code66?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}
                                </p>
                            </div>
                        </div>
                        <!-- <div class="bottomleft-bouttom">
              <div class="pulic">
                <div class="public-left">
                  <p class="yuan1"></p>
                  <p class="yuan-title">
                    <span class="desmidle"> {{ $t(i18n.global.t('dashboard.Public')) }}</span>
                    <span class="persent">{{ InitialAllocationPublic }}</span>
                  </p>
                </div>

                <p class="yuan-title3">{{ initialpublic?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
              </div>
              <div class="pulic1">
                <div class="public-left1">
                  <p class="yuan2"></p>
                  <p class="yuan-title">

                    <span class="desmidle">{{ $t(i18n.global.t('dashboard.Institutional')) }}</span>

                    <span class="persent">{{ InitialAllocationInstitutional }}</span>
                  </p>
                </div>
                <p class="yuan-title2">{{ initialinstituational?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
              </div>
              <div class="pulic2">
                <div class="public-left2">
                  <p class="yuan-title">{{ $t(i18n.global.t('dashboard.TotalOfferShares')) }}</p>

                </div>
                <p class="yuan-title1">{{ code66?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
              </div>
            </div> -->
                    </div>
                    <div class="content-bottomright">
                        <p class="bottomleft-title">
                            {{ $t(i18n.global.t('dashboard.FinalAllocation')) }}
                        </p>
                        <div ref="main2" style="width: 100%; height: 100%"></div>
                        <div class="bottomleft-bouttom2">
                            <div class="initialallocationleft">
                                <div class="initialallocationlefttitle">
                                    <div class="title">
                                        <p class="yuan8"></p>
                                        <p class="yuan-title">
                                            <span class="desmidle">
                                                {{ $t(i18n.global.t('dashboard.Public')) }}
                                            </span>
                                        </p>
                                    </div>
                                    <div class="title">
                                        <p class="yuan9"></p>
                                        <p class="yuan-title">
                                            <span class="desmidle">
                                                {{ $t(i18n.global.t('dashboard.Institutional')) }}
                                            </span>
                                        </p>
                                    </div>
                                    <div class="public-left2">
                                        <p class="yuan-titlesp">
                                            {{ $t(i18n.global.t('dashboard.TotalOfferShares')) }}
                                        </p>
                                    </div>
                                </div>
                                <div class="initialallocationleftpercent">
                                    <div class="persent">{{ FinalAllocationPublic1 }}</div>
                                    <div class="persent">{{ FinalAllocationInstitutional1 }}</div>
                                </div>
                            </div>
                            <div class="initialallocationright">
                                <p class="yuan-title2">
                                    {{
                                        finalpublic
                                            ?.toString()
                                            .replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
                                    }}
                                </p>
                                <p class="yuan-title2">
                                    {{ finalinstitutional?.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}
                                </p>
                                <p class="yuan-title1">
                                    {{ code99?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}
                                </p>
                            </div>
                        </div>
                        <!-- <div class="bottomleft-bouttom">
              <div class="pulic">
                <div class="public-left">
                  <p class="yuan8"></p>
                  <p class="yuan-title">
                    <span class="desmidle">{{ $t(i18n.global.t('dashboard.Public')) }}</span>
                    <span class="persent">{{ FinalAllocationPublic }}</span>
                  </p>

                </div>
                <p class="yuan-title3-1">{{ finalpublic?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
              </div>
              <div class="pulic1">
                <div class="public-left1">
                  <p class="yuan9"></p>
                  <p class="yuan-title">
                    <span class="desmidle">{{ $t(i18n.global.t('dashboard.Institutional')) }}</span>
                    <span class="persent">{{ FinalAllocationInstitutional }}</span>
                  </p>

                </div>
                <p class="yuan-title2-1">{{ finalinstitutional?.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
              </div>
              <div class="pulic2">
                <div class="public-left2">
                  <p class="yuan-title">{{ $t(i18n.global.t('dashboard.TotalOfferShares')) }}</p>
                </div>
                <p class="yuan-title1">{{ code99?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
              </div>
            </div> -->
                    </div>
                </div>
                <div v-else style="
                        display: flex;
                        align-items: center;
                        width: 100vw;
                        height: 90vh;
                        justify-content: center;
                    ">
                    <div style="color: #1f4055; font-weight: bold; font-size: 25px">
                        {{ $t(i18n.global.t('home.nodata')) }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
export default {
    name: "Xdashboard"
}
</script>
<script lang="ts" setup>
import Item from './Main.vue';
import { ref, onMounted, reactive, computed } from "vue";
import Nav from "./nav/index.vue";
import Header from "./Header/index.vue";
import * as echarts from "echarts";
import { useRoute } from 'vue-router'
import Box from './box/index.vue'
import { getIpo, getHomeIpo } from '@/api/reqIpo/ipo'
import moment from 'moment';
import i18n from '@/locales'
import { ipoStore } from "@/stores/ipo"
import { getCurrentInstance, onUnmounted } from 'vue'
import Drawer from '@/views/login/modelComponents/Drawer.vue'
import { getDataFromId } from "@/api/mock/home";
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import {
    TitleComponent,
    TooltipComponent,
    LegendComponent,
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import { provide } from 'vue';
use([
    CanvasRenderer,
    PieChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
]);
const MockRes = ref<any>('')
const drawer = ref(false)
const handleDrawer = (done: () => void) => {
    done();
}
const openDrawer = () => {
    drawer.value = true;
}
const { proxy } = (getCurrentInstance() as any)
// console.log('getCurrentInstance()中的proxy:', proxy)
const store = ipoStore()

const main = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
const main1 = ref(); // 使用ref创建虚拟DOM引用，使用时用main.value
const main2 = ref();
const route = useRoute()

var daysAndDom = [];
onMounted(
    () => {
        const obj = JSON.parse(sessionStorage.getItem('itemData') as string);
        data.value = obj;
        //console.log(data.value);
        getreferencedata()
        getdatatime()
    },
)
const ApplicationQuantity = ref('')
const subscriptionRatio = ref()
const code33 = ref('')
const initialinstituational = ref('')
const code44 = ref('')
console.log(code44.value);
const finalinstitutional = ref('')
const code66 = ref()
const finalpublic = ref('')
const code99 = ref(11)
const startDate = ref()
const endDate = ref()
const allotmentDate = ref()
const datatime = ref('')
const nowMounth = ref('')
const quantity = ref('')
const ratio = ref('')
const initialpublic = ref('')
interface lineObje {
    startDate: number
    endDate: number
    color: string
}
const LineData = reactive({
    nowMounth: "",
    lines: [] as lineObje[],
    ids: [] as any
})
const PublicOfferX1 = ref<string[]>([])
const PublicOfferY1 = ref<any[]>([])
const PublicOfferY1max = ref<number>()
const PublicOfferZ1 = ref<any[]>([])
const PublicOfferZ1max = ref<number>()
const PublicOfferZ1max1 = ref<number>()
const interval = ref()
const PublicOfferX = ref<string[]>([])
const PublicOfferY = ref<string[]>([])
const InitialAllocationPublic = ref('')
const FinalAllocationPublic = ref('')
const InitialAllocationInstitutional = ref('')
const FinalAllocationInstitutional = ref('')
const setBar = async () => {
    // mock数据测试开始
    const result1 = await getDataFromId('bar');
    const result = {
        data: result1
    }
    // mock数据测试结束
    //const ipoID = localStorage.getItem('ipoID')
    // const ipoID = sessionStorage.getItem('ipoID')
    // const result = await getIpo(ipoID as string)
    // console.log(ipoID,(result as any).data[0]);
    if ((result as any).data[0].graph != null) {
        PublicOfferX1.value = (result as any).data[0].graph.map((item: any) => {
            return moment(item.dateTime).format('MM/DD')
        })
        PublicOfferY1.value = (result as any).data[0].graph.map((item: any) => {
            return item.poApplicationQuantity / 1000000;
        });
        PublicOfferY1max.value = Math.floor(PublicOfferY1.value.slice().sort((a, b) => a - b)[PublicOfferY1.value.length - 1] * 2),
            PublicOfferZ1.value = (result as any).data[0].graph.map((item: any) => {
                const number = (item.poApplicationQuantity) / item.poSharesInitial
                console.log(number);

                return number.toFixed(2);

            });
        PublicOfferZ1max.value = Math.floor(PublicOfferZ1.value.slice().sort((a, b) => a - b)[PublicOfferZ1.value.length - 1] * 2)
        PublicOfferZ1max1.value = PublicOfferZ1max.value + 1.1

    }

}

onMounted(() => {
    store.setActiveShow(2);
    store.setMobileActiveShow(2);//设置移动端弹窗高亮
    // setBarRight();
    setBar()//real
})
const getdatatime = async () => {
    const ipoID = sessionStorage.getItem('ipoID')
    const res = await getIpo(ipoID as string)
    const time = (res as any).data[0].dateTime
    datatime.value = moment(time).format('YYYY-MM-DD HH:mm')
}
const FinalAllocationPublic1 = computed(() => {
    const percent1 = ref(0)
    finalpublic.value = MockRes.value.poSharesFinal
    finalinstitutional.value = MockRes.value.ioOfferSharesFinal
    code99.value = Number(finalpublic.value) + Number(finalinstitutional.value)
    percent1.value = Number(finalpublic.value) / code99.value * 100;
    const result = percent1.value
    if (isNaN(result)) {
        return "%"
    } else {
        return result.toFixed(2) + "%"
    }
})
const FinalAllocationInstitutional1 = computed(() => {
    const percent1 = ref(0)
    const percentfix1 = ref(0)
    finalpublic.value = MockRes.value.poSharesFinal
    finalinstitutional.value = MockRes.value.ioOfferSharesFinal
    code99.value = Number(finalpublic.value) + Number(finalinstitutional.value)
    percent1.value = Number(finalpublic.value) / code99.value * 100;
    percentfix1.value = Number(percent1.value.toFixed(2))
    const result = 100 - percentfix1.value
    if (isNaN(result)) {
        return "%"
    } else {
        return result.toFixed(2) + "%"
    }
}
)
const InitialAllocationPublic1 = computed(() => {
    const percent = ref(0)
    initialinstituational.value = MockRes.value.ioSharesInitial
    initialpublic.value = MockRes.value.poSharesInitial
    // console.log(MockRes.ioSharesInitial);
    // console.log(MockRes.value.ioSharesInitial);

    // console.log(initialinstituational.value);

    code66.value = Number(initialinstituational.value) + Number(initialpublic.value)
    //console.log(code66.value);

    percent.value = Number(initialpublic.value) / code66.value * 100;
    const result = percent.value
    if (isNaN(result)) {
        return "%"
    } else {
        return result.toFixed(2) + "%"
    }
})
const InitialAllocationInstitutional1 = computed(() => {
    const percentfix = ref(0)
    const percent = ref(0)
    initialinstituational.value = MockRes.value.ioSharesInitial
    initialpublic.value = MockRes.value.poSharesInitial
    code66.value = Number(initialinstituational.value) + Number(initialpublic.value)
    percent.value = Number(initialpublic.value) / code66.value * 100;
    percentfix.value = Number(percent.value.toFixed(2))
    const result = 100 - percentfix.value
    if (isNaN(result)) {
        return "%"
    } else {
        return result.toFixed(2) + "%"
    }
})
const subscriptionRatio1 = computed(() => {
    subscriptionRatio.value = MockRes.value.poApplicationQuantity / MockRes.value.poSharesInitial
    // console.log(MockRes.value.poApplicationQuantity);
    // console.log(MockRes.value.poSharesInitial);


    // console.log(subscriptionRatio.value);

    subscriptionRatio.value = subscriptionRatio?.value.toFixed(1)
    //   console.log(subscriptionRatio.value);
    //  console.log(subscriptionRatio?.value.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'));


    if (isNaN(subscriptionRatio.value)) {
        return ''
    } else if (subscriptionRatio.value == 'Infinity') {
        return ''
    } else {
        return subscriptionRatio?.value.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')//没有起作用
    }
    // else{
    //  // subscriptionRatio.value = subscriptionRatio?.value.toFixed(1)
    //   return subscriptionRatio?.value.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
    // }

})
const getreferencedata = async () => {
    //---mock测试接口
    const result1 = await getDataFromId('bar');
    const res = result1[0];
    MockRes.value = result1
    //---mock测试接口结束

    // const ipoID = localStorage.getItem('ipoID')
    // const ipoID = sessionStorage.getItem('ipoID')
    // const result = await getIpo(ipoID as string)
    // MockRes.value = (result as any).data[0]
    // const res = (result as any).data[0];
    // console.log(res);
    const { bookOpenDate, bookCloseDate, allotmentDate, siInputDate, listingDate } = res;


    startDate.value = bookOpenDate;
    endDate.value = bookCloseDate
    // console.log('$$', allotmentDate, allotmentDate)
    // console.log('$$', startDate.value, endDate.value)
    calendarAddData(allotmentDate, allotmentDate, '#9bc3f1')
    calendarAddData(startDate.value, endDate.value, '#65FABF')
    calendarAddData(siInputDate, siInputDate, '#bd99dc')
    calendarAddData(listingDate, listingDate, '#38b126')
    //  calendarAddData('2023-5-23', '2023-5-23', 'yellow')
    //  calendarAddData('2023-5-23', '2023-5-24', 'pink')
    //  calendarAddData('2023-5-23', '2023-5-25', 'blue')
    //  calendarAddData('2023-5-28', '2023-5-29', 'blue')
    calendarAddLine()
    initialpublic.value = res.poSharesInitial
    ApplicationQuantity.value = res.poApplicationQuantity
    subscriptionRatio.value = res.poApplicationQuantity / res.poSharesInitial
    subscriptionRatio.value = subscriptionRatio?.value.toFixed(1)
    initialinstituational.value = res.ioSharesInitial
    code44.value = res.poSharesFinal
    finalinstitutional.value = res.ioOfferSharesFinal
    finalpublic.value = res.poSharesFinal
    code66.value = Number(initialinstituational.value) + Number(initialpublic.value)
    code99.value = Number(finalpublic.value) + Number(finalinstitutional.value)
    quantity.value = res.overallIpoShares
    init1()
    init2()
}

//传入时间
function calendarAddData(startDate: string, endDate: string, color: string) {
    function toNumberTime(str: string) {
        return new Date(moment(str).format("YYYY-MM-DD")).getTime() as number
    }
    LineData.lines.push({ startDate: toNumberTime(startDate), endDate: toNumberTime(endDate), color })
}
//添加对应下划线
function calendarAddLine() {
    var calendarDom = calendar.value.$el;
    var daysDom = calendarDom.querySelectorAll('.el-calendar-day')
    var tag = 0;
    daysAndDom = [] as { dom: object, day: String }[]
    daysDom.forEach((item: any) => {
        var day = item.querySelector('span').innerText;
        if (day.length < 2) {
            day = "0" + day
        }
        if (day == "01") {
            tag++;
        }
        tag == 1 && daysAndDom.push({ dom: item, day })
    })
    daysDom.forEach((item: any) => {
        item.style.borderBottom = "";
    })
    if (LineData.ids.length) {
        LineData.ids.forEach((item: any) => {
            // item.dom.removeChild(item.id)
            var id = item.parent.querySelector("#" + item.id)
            //console.log('rrr', item)
            item.parent.removeChild(id);
        })
        LineData.ids = [];

    }
    const Arr = [[], [], [], [], [], [], [], [], [], [], [], []] as any
    daysAndDom.forEach((item: any) => {
        var str = LineData.nowMounth + item.day;
        var time1 = new Date(str).getTime()//time1为在startdate到enddate之间的时间
        LineData.lines.sort((a, b) => {
            return (b.endDate - b.startDate) - (a.endDate - a.startDate)
        })
        const arrADD = LineData.lines.map((line, index) => {
            if (line.startDate <= time1 && time1 <= line.endDate) {
                var span = document.createElement('div')
                span.style.width = '65px'
                span.style.height = '10px'
                span.style.marginBottom = '1px'
                span.setAttribute('id', 't' + time1)

                span.style.backgroundColor = line.color
                item.dom.appendChild(span)
                LineData.ids.push({ dom: span, parent: item.dom, id: 't' + time1 })
                Arr[index].push({ dom: span })
                if (768 >= document.documentElement.clientWidth) {
                    span.style.width = '47px'
                    span.style.height = '8px'
                    span.style.marginBottom = '1px'
                }
            }
            return {}
        })
    })
}
const option = computed(() => {
    return {
        grid: {
            top: 30,
            x: 75,
            x2: 60,
            y2: 200
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        xAxis: {
            // data: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue'],
            data: PublicOfferX1.value
        },
        yAxis: [
            {
                type: 'value',
                max: PublicOfferY1max.value,
                // max:1060,
                min: 0,
                splitNumber: 9,
                boundaryGap: [0.2, 0.2],
                name: i18n.global.t('dashboard.QuantityMillion'),
                nameTextStyle: {
                    padding: [0, 0, 0, 20] // 上右下左与原位置距离
                },
                lineStyle: {
                    width: 1,
                    type: 'solid',
                },
                axisLabel: {
                    formatter: function (value: any, index: any) {
                        return value.toFixed(1)
                    }
                }
            },
            {
                type: 'value',
                name: i18n.global.t('dashboard.Ratio'),
                min: 0,
                max: PublicOfferZ1max1.value,
                // max:4.0,
                // max: 20,
                splitNumber: 9,
                alignTicks: true,
                scale: true,
                // interval: Math.ceil(20/9),
                axisLabel: {
                    formatter: function (value: any, index: any) {
                        return value.toFixed(1)
                    }
                }
            }
        ],
        series: [

            {
                name: i18n.global.t('dashboard.QuantityMillion'),
                type: 'bar',
                data: PublicOfferY1.value,
                barWidth: '40%',
                itemStyle: {
                    color: '#f6caae'
                },
            }, {
                name: i18n.global.t('dashboard.Ratio'),
                type: 'line',
                data: PublicOfferZ1.value,
                yAxisIndex: 1,
            },
        ]
    }

})
const myChart1 = ref<any>()
const myChart2 = ref<any>()
function init1() {
    myChart1.value = echarts.init(main1.value);
    const option1 = {
        series: [

            {
                type: "pie", // type设置为饼图
                color: ['#333f50', '#ed7d31'],
                radius: ['65%'],
                center: ['50%', '35%'],
                data: [
                    {
                        name: "Public",
                        value: initialpublic.value
                    },
                    {
                        name: "Institution",
                        value: initialinstituational.value
                    }
                ],
                itemStyle: {
                    borderWidth: 5,
                    borderColor: '#fff'
                },
                cursor: 'default'
            }
        ]
    }
    myChart1.value.setOption(option1);
    //屏幕自适应
    window.onresize = () => {
        myChart1.value.resize();
        myChart2.value.resize();
    }
};
function init2() {
    myChart2.value = echarts.init(main2.value);
    const option2 = {
        series: [
            {
                type: "pie", // type设置为饼图
                color: ['#ffc000', '#2f5597',],
                radius: ['65%'],
                center: ['50%', '35%'],
                data: [
                    {
                        name: "Public",
                        value: finalpublic.value
                    },
                    {
                        name: "Institution",
                        value: finalinstitutional.value
                    }
                ],
                itemStyle: {
                    borderWidth: 5,
                    borderColor: '#fff'
                },
                cursor: 'default'
            }
        ]
    };
    myChart2.value.setOption(option2);

}
const data = ref({
    title: "FINI TESTING COMP",
    number: 10000,
    HKD: "HKD 148.000",
    price: "final offer Price",
    time: "2023-03-31 09:00",
    trading: "Commencement of trading date"
})

const calendar = ref()
const selectDate = (val: string) => {
    calendar.value.selectDate(val)

    setTimeout(() => {
        calendarAddLine()
    })
}
const showMounth = (date: any) => {
    function en() {
        const month = date.split(" ")[2]
        const year = date.split(" ")[0]
        var monthObj = {
            January: "01",
            February: "02",
            March: "03",
            April: "04",
            May: "05",
            June: "06",
            July: "07",
            August: "08",
            September: "09",
            October: "10",
            November: "11",
            December: "12"

        }
        if (isValidKey(month, monthObj)) {
            const monunNumber = monthObj[month]

            LineData.nowMounth = year + "-" + monunNumber + "-"
        }
        function isValidKey(
            key: string | number | symbol,
            object: object
        ): key is keyof typeof object {
            return key in object;
        }

    }
    function chinese() {
        let month = date.split(" ")[2]
        let year = date.split(" ")[0]
        if (month.length < 2) {
            month = "0" + month;
        }
        LineData.nowMounth = year + "-" + month + "-"

    }
    if (store.$state.locale == 1) {
        en()
    } else {
        chinese()
    }

    // const arr = date.split(" ")
    // if (arr.length == 3) {
    //   return arr[2]
    // } else if (arr.length == 4) {
    //   return arr[2] + " " + arr[3]
    // }
    return date
}
function fn(data: any) {
    drawer.value = data
}



</script>
<style lang="scss" scoped>
.yuan-titlesp {
    font-size: 19px;
    font-family: 'Calibri';
    color: #8e9eaa;

    @media screen and (max-width: 768px) {
        font-size: 17px;
        //margin-top: 11px;
        color: #a4b0ba;
    }
}

.bottomleft-bouttom1 {
    //background-color: red;
    width: 445px;
    height: 95px;
    transform: translateY(-150px);
    display: flex;
    margin-left: 20px;
    margin-top: 10px;
    justify-content: space-between;

    @media screen and (max-width: 768px) {
        width: 81vw;
        margin-left: 5vw;
        margin-top: -2vh;
        //background-color: red;
        //justify-content: space-between;
    }

    .initialallocationright {
        //  background-color: #1f4055;
        margin-left: 20px;

        @media screen and (max-width: 768px) {
            margin-left: 0;
        }
    }

    .initialallocationleft {
        width: 230px;
        //background-color: #20b109;
        height: 95px;
        display: flex;

        @media screen and (max-width: 768px) {
            width: 50vw;
        }

        .initialallocationleftpercent {
            .persent {
                margin-top: 12px;

                @media screen and (max-width: 768px) {
                    margin-top: 16px;
                }
            }
        }

        .initialallocationlefttitle {
            width: 140px;
            //background-color: yellow;
            height: 95px;

            .title {
                display: flex;
                margin-top: 10px;

                // background-color: #1f4055;
                @media screen and (max-width: 768px) {
                    margin-top: 12px;
                }
            }
        }
    }
}

.bottomleft-bouttom2 {
    // background-color: red;
    width: 435px;
    height: 95px;
    transform: translateY(-150px);
    display: flex;
    margin-left: 20px;
    margin-top: 10px;
    justify-content: space-between;

    @media screen and (max-width: 768px) {
        width: 81vw;
        margin-left: 5vw;
        margin-top: -2vh;
        //background-color: red;
        //justify-content: space-between;
    }

    .initialallocationright {
        //  background-color: #1f4055;
        margin-left: 20px;

        @media screen and (max-width: 768px) {
            margin-left: 0;
        }
    }

    .initialallocationleft {
        width: 230px;
        //background-color: #20b109;
        height: 95px;
        display: flex;

        @media screen and (max-width: 768px) {
            width: 50vw;
        }

        .initialallocationleftpercent {
            .persent {
                margin-top: 12px;

                @media screen and (max-width: 768px) {
                    margin-top: 16px;
                }
            }
        }

        :deep(.el-calendar__header) {
            align-items: center;
        }

        .initialallocationlefttitle {
            width: 140px;
            //background-color: yellow;
            height: 95px;

            .title {
                display: flex;
                margin-top: 10px;

                // background-color: #1f4055;
                @media screen and (max-width: 768px) {
                    margin-top: 12px;
                }
            }
        }
    }
}

.login11 {
    background-image: url('@/assets/1x/beijingtu.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: fit-content;
    font-family: 'Calibri';
    width: 100vw;

    box-sizing: border-box;

    @media screen and (max-width: 768px) {
        max-width: 100vw;
        overflow: auto;
        overflow-x: hidden;
        height: 100%;
    }
}

.wrap {
    display: flex;
    padding-top: 30px;
    width: 1400px;
    overflow: hidden;

    @media screen and (max-width: 768px) {
        width: fit-content;
        height: fit-content;
        overflow-x: hidden;
    }

    .leftbox {
        width: 22%;
        height: 100%;
        position: relative;

        @media screen and (max-width: 768px) {
            display: none;
        }
    }

    .rightbox {
        width: 78%;
        height: 100%;

        @media screen and (max-width: 768px) {
            width: 100vw;
            transform: translateY(-30px);
            height: fit-content;
            overflow: hidden;
        }

        .content {
            width: 120%;
            // height: 100vh;
            display: flex;
            flex-wrap: wrap;

            @media screen and (max-width: 768px) {
                margin-top: 30px;
                height: calc(100vh - 140px);
                width: 100vw;
                overflow-x: hidden;
                overflow-y: scroll;
            }

            .persent {
                color: #9fa0bf;
                font-weight: 400;
                font-size: 16px;
                font-family: 'Calibri';
                // margin-left: 14px;
            }

            .desmidle {
                margin: 0 10px 0 10px;
            }

            .pulic {
                display: flex;
                // justify-content: space-around;
                justify-content: space-between;
                margin-left: 55px;
                align-items: flex-end;

                //background-color: red;
                @media screen and (max-width: 768px) {
                    margin-left: 21px;
                }
            }

            .pulic1 {
                display: flex;
                // justify-content: space-around;
                justify-content: space-between;
                align-items: flex-end;
                margin-left: 35px;

                @media screen and (max-width: 768px) {
                    margin-left: 0px;
                }
            }

            .pulic2 {
                display: flex;
                // justify-content: space-around;
                justify-content: space-between;
                align-items: flex-end;
                margin-left: 5px;

                @media screen and (max-width: 768px) {
                    margin-left: -20px;
                    width: 85vw;
                }
            }

            .public-left {
                display: flex;
                margin-top: 10px;
                // width:80px;
                //min-width: 80px;
                justify-content: space-between;
                color: #647c8b;
                margin-left: 27px;
            }

            .public-left1 {
                display: flex;
                margin-top: 10px;
                //min-width: 120px;
                justify-content: space-between;
                color: #647c8b;
            }

            .public-left2 {
                margin-top: 10px;
                color: #647c8b;
            }

            .institutional {
                display: flex;
            }

            .total {
                display: flex;
            }

            .yuan1 {
                width: 15px;
                height: 15px;
                background-color: #333f50;
                border-radius: 50%;
                margin-top: 3px;

                @media screen and (max-width: 768px) {
                    margin-top: 3px;
                }
            }

            .yuan2 {
                width: 15px;
                height: 15px;
                background-color: #ed7d31;
                border-radius: 50%;
                margin-top: 3px;

                @media screen and (max-width: 768px) {
                    margin-top: 3px;
                }
            }

            .yuan8 {
                width: 15px;
                height: 15px;
                background-color: #ffc000;
                border-radius: 50%;
                margin-top: 3px;

                @media screen and (max-width: 768px) {
                    margin-top: 3px;
                }
            }

            .yuan9 {
                width: 15px;
                height: 15px;
                background-color: #2f5597;
                border-radius: 50%;
                margin-top: 3px;

                @media screen and (max-width: 768px) {
                    margin-top: 3px;
                }
            }

            .yuan-title {
                font-size: 19px;
                font-family: 'Calibri';
                color: #8e9eaa;

                @media screen and (max-width: 768px) {
                    font-size: 17px;
                    margin-top: 3px;
                }
            }

            .yuan-title3 {
                margin-left: 63px;
                color: #5c6063;
                font-size: 18px;
                font-weight: 400;
                display: flex;
                flex-direction: row-reverse;

                // background-color: #20b109;
                @media screen and (max-width: 768px) {
                    margin-left: 28px;
                }
            }

            .yuan-title3-1 {
                margin-left: 52px;
                color: #5c6063;
                font-size: 18px;
                font-weight: 400;

                @media screen and (max-width: 768px) {
                    margin-left: 20px;
                }
            }

            .yuan-title2 {
                margin-left: 20px;
                color: #5c6063;
                font-size: 18px;
                font-weight: 400;
                display: flex;
                flex-direction: row-reverse;
                margin-top: 10px;
                height: 18px;

                @media screen and (max-width: 768px) {
                    transform: translateX(-40px);
                    margin-top: 14px;
                    //margin-left: -200px;
                    // background-color: pink;
                }

                // background-color: #20b109;
            }

            .yuan-title2-1 {
                margin-left: 23px;
                color: #5c6063;
                font-size: 18px;
                font-weight: 400;
            }

            .yuan-title1 {
                margin-left: 55px;
                color: #516c7e;
                font-weight: bold;
                font-size: 25px;
                display: flex;
                flex-direction: row-reverse;
                margin-top: 10px;

                // background-color: #20b109;
                @media screen and (max-width: 768px) {
                    font-size: 18px;
                    transform: translateX(-40px);
                }
            }

            .yuan2 {
                width: 15px;
                height: 15px;
                background-color: #ed7d31;
                border-radius: 50%;
            }

            .yuan3 {
                width: 15px;
                height: 15px;
                background-color: #65fabf;
                border-radius: 50%;
                // position: relative;
                // top:50%;
                //transform:translateY(5%);
                // margin-top: 7px;
            }

            .yuan4 {
                width: 15px;
                height: 15px;
                background-color: #ee4040;
                border-radius: 50%;
            }

            .yuan5 {
                width: 15px;
                height: 15px;
                background-color: #20b109;
                border-radius: 50%;
                // margin-top: 7px;
            }

            .yuan6 {
                width: 15px;
                height: 15px;
                background-color: #98c2f2;
                border-radius: 50%;
                // margin-top: 7px;
            }

            .yuan7 {
                width: 15px;
                height: 15px;
                background-color: #bf98de;
                border-radius: 50%;
                // margin-top: 7px;
            }

            .topleft-bottom {
                transform: translateY(-15px);

                @media screen and (max-width: 768px) {
                    transform: translateY(-30px);
                }
            }

            .bottomleft-bouttom {
                transform: translateY(-150px);
                padding-right: 40px;
                padding-left: 30px;

                @media screen and (max-width: 768px) {
                    padding-right: 10px;
                    // transform: translateY(-10px);
                }
            }

            .topright-p {
                transform: translateY(-132%);

                @media screen and (max-width: 768px) {
                    transform: translateY(-135%);
                }
            }

            .p-1 {
                display: flex;
                margin-left: 50px;
                font-size: 20px;
                color: #415d6f;
                justify-content: space-between;
                width: 405px;

                @media screen and (max-width: 768px) {
                    width: 80vw;
                    transform: translateX(-6vw);
                    font-size: 15px;
                }
            }

            .p-2-2 {
                width: 28%;
                // margin-top: 20px;
                transform: translateY(5px);
                font-weight: 600;
                font-size: 23px;

                @media screen and (max-width: 768px) {
                    font-size: 20px;
                }

                // }
            }

            .p-3 {
                margin-top: 15px;
                display: flex;
                justify-content: space-between;
                width: 405px;
                margin-left: 50px;
                font-size: 20px;
                color: #415d6f;

                @media screen and (max-width: 768px) {
                    width: 80vw;
                    transform: translateX(-6vw);
                    font-size: 16px;
                }
            }

            .p-4 {
                margin-top: 3px;
                margin-left: 50px;
                font-size: 19px;

                @media screen and (max-width: 768px) {
                    width: 80vw;
                    transform: translateX(-6vw);
                    font-size: 15px;
                }
            }

            .p-5 {
                // float: right;
                //margin-top: 10px;

                //margin-right: 38px;
                color: #7e929f;
                font-size: 18px;
                width: 405px;
                //background-color: #1f4055;
                margin-left: 50px;
                display: flex;
                justify-content: end;
                margin-top: 5px;

                @media screen and (max-width: 768px) {
                    transform: translateX(-6vw);
                    font-size: 15px;
                    //transform: translateY(-6px);
                    //margin-right: 4px;
                    width: 80vw;
                }
            }

            .topleft-bottom1 {
                display: flex;
                margin-left: 10%;
                margin-top: 10px;
                align-items: center;
                height: 23px;

                @media screen and (max-width: 768px) {
                    align-items: center;
                    height: 15px;
                    width: 300px;
                    //transform: translateY(-6px);
                    //margin-right: 4px;
                    margin-top: 15px;
                }
            }

            .bottomleft-title {
                font-size: 25px;
                margin: 5px;
                color: #2e4d60;
                font-weight: bold;
                margin-left: 20px;
                margin-top: 15px;

                @media screen and (max-width: 768px) {
                    margin-left: 2vw;
                    margin-top: 10px;
                }
            }

            .calendar-title {
                margin-left: 20px;
                font-size: 23px;
                color: #2a4a5e;
                font-family: 'Calibri';

                @media screen and (max-width: 768px) {
                    font-size: 20px;
                }
            }

            .content-topleft {
                width: 490px;
                height: 640px;
                background-color: #fff;

                @media screen and (max-width: 768px) {
                    width: 90vw;
                    margin-left: 5vw;
                    height: fit-content;
                }

                // background-color: red;
                .content-title {
                    font-size: 25px;
                    margin: 5px;
                    color: #2e4d60;
                    font-weight: bold;
                    margin-left: 20px;
                    margin-top: 10px;
                    cursor: default;

                    @media screen and (max-width: 768px) {
                        margin-left: 2vw;
                    }
                }
            }

            .content-topright {
                width: 490px;
                height: 640px;
                background-color: #fff;
                margin-left: 20px;

                @media screen and (max-width: 768px) {
                    width: 90vw;
                    height: 60vh;
                    margin-left: 5vw;
                    margin-top: 2vh;
                }

                .topright-title {
                    font-size: 25px;
                    margin: 5px;
                    color: #2e4d60;
                    font-weight: bold;
                    margin-left: 20px;
                    margin-top: 10px;

                    @media screen and (max-width: 768px) {
                        margin-left: 2vw;
                    }
                }
            }

            .content-bottomleft {
                margin-top: 40px;
                width: 490px;
                height: 432px;
                background-color: #fff;

                @media screen and (max-width: 768px) {
                    width: 90vw;
                    margin-left: 5vw;
                    margin-top: 2vh;
                }
            }

            .content-bottomright {
                margin-top: 40px;
                width: 490px;
                height: 432px;
                background-color: #fff;
                margin-left: 20px;

                @media screen and (max-width: 768px) {
                    width: 90vw;
                    margin-left: 5vw;
                    margin-top: 2vh;
                }
            }

            // .month {
            //   font-size: 25px;
            //   color: #fff;
            //   font-weight: bold;
            // }

            // .calendar {
            //   :deep(.el-calendar-day) {
            //     border-bottom: 1px solid black;
            //   }
            // }
        }
    }

    .content-bottomleft {
        width: 45%;
        height: 40%;
        background-color: #fff;
    }

    .content-bottomright {
        width: 45%;
        height: 40%;
        background-color: #fff;
        margin-left: 20px;
    }

    .month {
        font-size: 25px;
        color: #fff;
        font-weight: bold;

        @media screen and (max-width: 768px) {
            font-size: 20px;
            font-weight: 400;
        }
    }
}

:deep(.el-calendar) {
    --el-calendar-border: none;
    cursor: default;

    @media screen and (max-width: 768px) {
        width: 80vw;
        margin-left: 5vw;
    }
}

:deep(.el-calendar__header) {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: var(--el-calendar-header-border-bottom);
    background-color: #1f4055;
    width: 410px;
    margin-left: 20px;
    font-family: 'Calibri';

    @media screen and (max-width: 768px) {
        width: 75vw;
        margin-left: -2.5vw;
    }
}

:deep(.el-calendar__body) {
    padding: 1vw 1vw 35px;
}

:deep(.el-calendar-table) {
    width: 450px;
    padding-left: 10px 75px 27px !important;
    cursor: default;

    @media screen and (max-width: 768px) {
        width: 80vw;
        // transform: translate(-4vw);
        margin-left: -10px;
    }
}

:deep(.el-calendar .el-calendar-table .el-calendar-day) {
    padding: 0px;
    text-align: center;
    line-height: 33px;
    font: 13px 'Poppins-Regular';
    background-color: #fff;
    //background-color: red;
    min-height: 33px;
    height: 57px;
    // border: none;
    cursor: default;
    font-family: 'Calibri';
}

:deep(.el-calendar-table) {
    border: none;
    text-align: center;
}

:deep(.el-calendar-table thead) {
    margin-top: 20px;
    font-size: 13px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    background-color: rgb(255, 255, 255);
    font-family: 'Calibri';
}

:deep(.el-calendar-table td.is-today) {
    color: black;
}
</style>
<style lang="scss" scoped>
@media (min-width: 768px) and (max-width: 1400px) {
    .content-bottomleft {
        margin-top: calc(100vw / var(--screen) * 40) !important;
        width: calc(100vw / var(--screen) * 490) !important;
        height: calc(100vw / var(--screen) * 432) !important;

        .main1 {
            width: calc(100vw / var(--screen) * 490) !important;
            height: calc(100vw / var(--screen) * 432) !important;
        }
    }

    .content-bottomright {
        margin-top: calc(100vw / var(--screen) * 40) !important;
        width: calc(100vw / var(--screen) * 490) !important;
        height: calc(100vw / var(--screen) * 432) !important;

        margin-left: calc(100vw / var(--screen) * 20) !important;
    }

    .bottomleft-bouttom1 {
        //background-color: red;
        width: calc(100vw / var(--screen) * 445);
        height: calc(100vw / var(--screen) * 95);
        transform: translateY(calc(100vw / var(--screen) * -150));
        margin-left: calc(100vw / var(--screen) * 20);
        margin-top: calc(100vw / var(--screen) * 10);

        .initialallocationright {
            //  background-color: #1f4055;
            margin-left: calc(100vw / var(--screen) * 20);
        }

        .initialallocationleft {
            width: calc(100vw / var(--screen) * 230);
            //background-color: #20b109;
            height: calc(100vw / var(--screen) * 95);

            .initialallocationleftpercent {
                .persent {
                    margin-top: calc(100vw / var(--screen) * 12);
                }
            }

            .initialallocationlefttitle {
                width: calc(100vw / var(--screen) * 140);
                //background-color: yellow;
                height: calc(100vw / var(--screen) * 95);

                .title {
                    margin-top: calc(100vw / var(--screen) * 10);
                }
            }
        }
    }

    .bottomleft-bouttom2 {
        // background-color: red;
        width: calc(100vw / var(--screen) * 435);
        height: calc(100vw / var(--screen) * 95);
        transform: translateY(calc(100vw / var(--screen) * -150));
        margin-left: calc(100vw / var(--screen) * 20);
        margin-top: calc(100vw / var(--screen) * 10);

        .initialallocationright {
            //  background-color: #1f4055;
            margin-left: calc(100vw / var(--screen) * 20);
        }

        .initialallocationleft {
            width: calc(100vw / var(--screen) * calc(100vw / var(--screen) * 230));
            height: calc(100vw / var(--screen) * 95);

            .initialallocationleftpercent {
                .persent {
                    margin-top: calc(100vw / var(--screen) * 12);
                }
            }

            .initialallocationlefttitle {
                width: calc(100vw / var(--screen) * 140);
                //background-color: yellow;
                height: calc(100vw / var(--screen) * 95);

                .title {
                    margin-top: calc(100vw / var(--screen) * 10);
                }
            }
        }
    }

    .login11 {
        height: 100vh;
        width: 100vw;
    }

    .wrap {
        display: flex;
        padding-top: calc(100vw / var(--screen) * 30);
        width: calc(100vw / var(--screen) * 1400);

        .leftbox {
            width: 22%;
            height: 100%;
        }

        .rightbox {
            width: 78%;
            height: 100%;

            .content {
                width: 120%;

                .persent {
                    color: #9fa0bf;
                    font-weight: 400;
                    font-size: calc(100vw / var(--screen) * 16);
                    font-family: 'Calibri';
                    // margin-left: 14px;
                }

                .desmidle {
                    margin: 0 calc(100vw / var(--screen) * 10) 0 calc(100vw / var(--screen) * 10);
                }

                .pulic {
                    margin-left: calc(100vw / var(--screen) * 55);
                }

                .pulic1 {
                    margin-left: calc(100vw / var(--screen) * 35);
                }

                .pulic2 {
                    margin-left: calc(100vw / var(--screen) * 5);
                }

                .public-left {
                    margin-top: calc(100vw / var(--screen) * 10);
                    margin-left: calc(100vw / var(--screen) * 27);
                }

                .public-left1 {
                    margin-top: calc(100vw / var(--screen) * 10);
                }

                .public-left2 {
                    margin-top: calc(100vw / var(--screen) * 10);
                }

                .yuan1 {
                    width: calc(100vw / var(--screen) * 15);
                    height: calc(100vw / var(--screen) * 15);
                    border-radius: 50%;
                    margin-top: calc(100vw / var(--screen) * 3);
                }

                .yuan2 {
                    width: calc(100vw / var(--screen) * 15);
                    height: calc(100vw / var(--screen) * 15);

                    border-radius: 50%;
                    margin-top: calc(100vw / var(--screen) * 3);
                }

                .yuan8 {
                    width: calc(100vw / var(--screen) * 15);
                    height: calc(100vw / var(--screen) * 15);
                    border-radius: 50%;
                    margin-top: calc(100vw / var(--screen) * 3);
                }

                .yuan9 {
                    width: calc(100vw / var(--screen) * 15);
                    height: calc(100vw / var(--screen) * 15);

                    border-radius: 50%;
                    margin-top: calc(100vw / var(--screen) * 3);
                }

                .yuan-title {
                    font-size: calc(100vw / var(--screen) * 19);
                }

                .yuan-title3 {
                    margin-left: calc(100vw / var(--screen) * 63);

                    font-size: calc(100vw / var(--screen) * 18);
                }

                .yuan-title3-1 {
                    margin-left: calc(100vw / var(--screen) * 52);

                    font-size: calc(100vw / var(--screen) * 18);
                }

                .yuan-title2 {
                    margin-left: calc(100vw / var(--screen) * 20);

                    font-size: calc(100vw / var(--screen) * 18);

                    margin-top: calc(100vw / var(--screen) * 10);
                    height: calc(100vw / var(--screen) * 18);

                    // background-color: #20b109;
                }

                .yuan-title2-1 {
                    margin-left: calc(100vw / var(--screen) * 23);

                    font-size: calc(100vw / var(--screen) * 18);
                }

                .yuan-title1 {
                    margin-left: calc(100vw / var(--screen) * 55);

                    font-size: calc(100vw / var(--screen) * 25);

                    margin-top: calc(100vw / var(--screen) * 10);

                    // background-color: #20b109;
                }

                .yuan2 {
                    width: calc(100vw / var(--screen) * 15);
                    height: calc(100vw / var(--screen) * 15);

                    border-radius: 50%;
                }

                .yuan3 {
                    width: calc(100vw / var(--screen) * 15);
                    height: calc(100vw / var(--screen) * 15);

                    border-radius: 50%;
                }

                .yuan4 {
                    width: calc(100vw / var(--screen) * 15);
                    height: calc(100vw / var(--screen) * 15);
                }

                .yuan5 {
                    width: calc(100vw / var(--screen) * 15);
                    height: calc(100vw / var(--screen) * 15);
                }

                .yuan6 {
                    width: calc(100vw / var(--screen) * 15);
                    height: calc(100vw / var(--screen) * 15);
                }

                .yuan7 {
                    width: calc(100vw / var(--screen) * 15);
                    height: calc(100vw / var(--screen) * 15);
                }

                .topleft-bottom {
                    transform: translateY(calc(100vw / var(--screen) * -15));
                }

                .bottomleft-bouttom {
                    transform: translateY(calc(100vw / var(--screen) * -150));
                    padding-right: calc(100vw / var(--screen) * 40);
                    padding-left: calc(100vw / var(--screen) * 30);
                }

                .topright-p {
                    transform: translateY(-132%);
                }

                .p-1 {
                    display: flex;
                    margin-left: calc(100vw / var(--screen) * 50);
                    font-size: calc(100vw / var(--screen) * 20);

                    width: calc(100vw / var(--screen) * 405);
                }

                .p-2-2 {
                    width: 28%;
                    // margin-top: 20px;
                    transform: translateY(calc(100vw / var(--screen) * 5));

                    font-size: calc(100vw / var(--screen) * 23);

                    // }
                }

                .p-3 {
                    margin-top: calc(100vw / var(--screen) * 15);
                    display: flex;
                    justify-content: space-between;
                    width: calc(100vw / var(--screen) * 405);
                    margin-left: calc(100vw / var(--screen) * 50);
                    font-size: calc(100vw / var(--screen) * 20);
                    color: #415d6f;
                }

                .p-4 {
                    margin-top: calc(100vw / var(--screen) * 3);
                    margin-left: calc(100vw / var(--screen) * 50);
                    font-size: calc(100vw / var(--screen) * 19);
                }

                .p-5 {
                    color: #7e929f;
                    font-size: calc(100vw / var(--screen) * 18);
                    width: calc(100vw / var(--screen) * 405);

                    margin-left: calc(100vw / var(--screen) * 50);

                    margin-top: calc(100vw / var(--screen) * 5);
                }

                .topleft-bottom1 {
                    margin-top: calc(100vw / var(--screen) * 10);

                    height: calc(100vw / var(--screen) * 23);
                }

                .bottomleft-title {
                    font-size: calc(100vw / var(--screen) * 25);
                    margin: calc(100vw / var(--screen) * 5);

                    margin-left: calc(100vw / var(--screen) * 20);
                    margin-top: calc(100vw / var(--screen) * 15);
                }

                .calendar-title {
                    margin-left: calc(100vw / var(--screen) * 20);
                    font-size: calc(100vw / var(--screen) * 23);
                }

                .content-topleft {
                    width: calc(100vw / var(--screen) * 490);
                    height: calc(100vw / var(--screen) * 640);

                    // background-color: red;
                    .content-title {
                        font-size: calc(100vw / var(--screen) * 25);
                        margin: calc(100vw / var(--screen) * 5);

                        margin-left: calc(100vw / var(--screen) * 20);
                        margin-top: calc(100vw / var(--screen) * 10);
                    }
                }

                .content-topright {
                    width: calc(100vw / var(--screen) * 490);
                    height: calc(100vw / var(--screen) * 640);

                    margin-left: calc(100vw / var(--screen) * 20);

                    .topright-title {
                        font-size: calc(100vw / var(--screen) * 25);
                        margin: calc(100vw / var(--screen) * 5);

                        margin-left: calc(100vw / var(--screen) * 20);
                        margin-top: calc(100vw / var(--screen) * 10);
                    }
                }
            }
        }

        .content-bottomleft {
            width: 45%;
            height: 40%;
        }

        .content-bottomright {
            width: 45%;
            height: 40%;
            background-color: #fff;
            margin-left: calc(100vw / var(--screen) * 20);
        }

        .month {
            font-size: calc(100vw / var(--screen) * 25);
        }
    }

    :deep(.el-calendar__header) {
        display: flex;
        justify-content: space-between;
        padding: calc(100vw / var(--screen) * 12) 20;
        border-bottom: var(--el-calendar-header-border-bottom);
        width: calc(100vw / var(--screen) * 410);
        margin-left: calc(100vw / var(--screen) * 20);
    }

    :deep(.el-calendar__body) {
        padding: 1vw 1vw calc(100vw / var(--screen) * 35);
    }

    :deep(.el-calendar-table) {
        width: calc(100vw / var(--screen) * 450);
        padding-left: calc(100vw / var(--screen) * 10) calc(100vw / var(--screen) * 75) calc(100vw / var(--screen) * 27) !important;
        cursor: default;
    }

    :deep(.el-calendar .el-calendar-table .el-calendar-day) {
        line-height: calc(100vw / var(--screen) * 33);
        font: calc(100vw / var(--screen) * 13) 'Poppins-Regular';

        min-height: calc(100vw / var(--screen) * 33);
        height: calc(100vw / var(--screen) * 57);
    }

    :deep(.el-calendar-table thead) {
        margin-top: calc(100vw / var(--screen) * 20);
        font-size: calc(100vw / var(--screen) * 13);
    }

    .yuan-titlesp {
        font-size: calc(100vw / var(--screen) * 19);
    }
}
</style>